<template>
  <transition enter-active-class="animate__animated animate__fadeInLeft"
    leave-active-class="animate__animated animate__fadeOutLeft">
    <div class="Mv">
      <van-icon class="icon-left"
        name="arrow-left"
        @click="toIndex" />

      <div class="vedioBox">
        <video @timeupdate='updateInput'
          ref="videos"
          @click="showPause"
          class="vdo"
          :src="mvMsg.url"></video>
        <i v-show="!togglePlay"
          class="iconfont icon"
          @click="togglePlay=!togglePlay">
          <van-icon name="play-circle-o
"></van-icon>
        </i>
        <i v-show="togglePlay"
          class="iconfont icon pauseIcon"
          @click="togglePlay=!togglePlay"
          ref="pauseIcon">
          <van-icon name="pause-circle-o
"></van-icon>
          </i>
      </div>
      <!-- 进度条 -->
      <div class="aprogress"
        style="display:none"
        ref="ipt">
        <input @change="sendPercentage"
          ref='processIpt'
          :style="{backgroundSize:`${percentage2}% 100%`}"
          :value="percentage"
          type="range"
          min="0"
          max="100" />
        <!-- v-model="processTime" -->
      </div>
      <!-- 评论 -->
      <div class="comsBox">
        <Comments :commentList='comments'></Comments>
      </div>
    </div>
  </transition>
</template>

<script>
import Comments from '@/components/Comments.vue'
export default {
  components: {
    Comments
  },
  data () {
    return {
      mvMsg: '',
      togglePlay: false,
      percentage: 0,
      percentage2: 0,
      comments: ''
    }
  },

  created () {
    this.getMvMsg()
    this.getMvComments()
  },
  methods: {
    // 获取评论
    async getMvComments () {
      const { data: res } = await this.$http.get(`/comment/mv?id=${this.$route.query.ids}`)
      this.comments = res
    },
    updateInput () {
      if (this.$refs.videos) {
        this.$refs.processIpt.value = (this.$refs.videos.currentTime / this.$refs.videos.duration) * 100
      }
    },
    // 进度更新
    sendPercentage () {
      this.$refs.videos.currentTime = (this.$refs.processIpt.value / 100) * this.$refs.videos.duration
      this.percentage2 = (this.$refs.processIpt.value / 100) * this.$refs.videos.duration
    },
    toIndex () {
      this.$router.go(-1)
    },
    showPause () {
      if (this.$refs.ipt) {
        this.$refs.ipt.style.display = 'block'
        setTimeout(function () {
          that.$refs.ipt.style.display = 'none'
        }, 3000)
        const that = this
        if (this.togglePlay) {
          this.$refs.pauseIcon.style.display = 'block'
          setTimeout(function () {
            that.$refs.pauseIcon.style.display = 'none'
          }, 3000)
        }
      }
    },
    async getMvMsg () {
      this.$store.commit('rotateing', false)
      const {
        data: { data: res }
      } = await this.$http.get(`https://apis.netstart.cn/music/mv/url?id=${this.$route.query.ids}`)
      this.mvMsg = res
    }
  },
  computed: {
    // percentage2() {
    //   return this.percentage2;
    // }
  },
  watch: {
    togglePlay (val) {
      if (val) {
        this.$refs.videos.play()
        const that = this
        setTimeout(function () {
          that.$refs.pauseIcon.style.display = 'none'
        }, 3000)
      } else {
        this.$refs.videos.pause()
      }
    }
  }
}
</script>

<style scoped lang='less'>
@keyframes hiddenPause {
  from {
    display: block;
  }
  to {
    display: hidden;
  }
}
.comsBox {
  margin-top: 50px;
}
.aprogress {
  position: absolute;
  bottom: 483px;
  width: 98%;
  .hideBox1 {
    width: 88vw;
    height: 8px;
    position: absolute;
    background-color: black;
  }
  .hideBox2 {
    width: 67vw;
    height: 10px;
    position: absolute;
    bottom: 0;
    background-color: black;
  }
  input[type='range'] {
    margin-top: 8px; /*上部分的填充值*/
    outline: none;
    -webkit-appearance: none; /*清除系统默认样式*/
    width: 100% !important;
    background: -webkit-linear-gradient(#7a7a77, #f7f5efec) no-repeat, #f7f0f0de; /*背景颜色，俩个颜色分别对应上下，自己尝试下就知道了嗯*/
    // background-size: 44% 100%; /*设置左右宽度比例*/
    height: 2px; /*横条的高度，细的真的比较好看嗯*/
  }

  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none; /*清除系统默认样式*/
    height: 10px; /*拖动块高度*/
    width: 10px; /*拖动块宽度*/
    background: #f8f9fa; /*拖动块背景*/
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 1px #ddd; /*设置边框*/
  }
}
.backto {
  width: 50px;
  height: 50px;
  font-size: 30px;
  color: rgb(231, 223, 223);
  position: absolute;
  top: 0;
  left: 0;
}
.pauseIcon {
  transition: display 1s linear;
  // animation: hiddenPause 1s linear;
}
.Mv {
  z-index: 999;
  padding-top: 95px;
  background-color: #000000;
  height: 100%;
  position: absolute;
  .icon-left {
// background-color: red;
    font-size: 25px;
    color: white;
    top: 20px;
    left: 20px;
    position: absolute;
  }
}
.vedioBox {
  position: relative;
  video {
    width: 100%;
    height: 300px;
  }
  i {
    position: absolute;
    font-size: 40px;
    // width: 200px;
    // height: 200px;
    top: calc(53% - 19px);
    left: calc(54% - 19px);
    color: white;
  }
}
</style>
